<template lang="pug">
.container
	.weui-flex(v-swiper:mySwiper="swiperOption")
		.weui-flex__item.swiper-wrapper
			.placeholder.swiper-slide(v-for='item in imgs')
				img(:src="'/img/' + item.img" )

		.swiper-pagination.swiper-pagination-bullets

	.weui-flex
		.weui-flex__item
			.placeholder.textcenter 精选主题
	.weui-flex.buttom
		.weui-flex__item
			nuxt-link.placeholder.select(v-bind:to="{name: 'select-type',params: { type: 'fruits'}}")
				img(src="/img/1@theme.png")
		.weui-flex__item
			nuxt-link.placeholder.select.left(v-bind:to="{name: 'select-type',params: { type: 'greens'}}")
				img(src="/img/2@theme.png")
	.weui-flex.buttom
		.weui-flex__item
			nuxt-link.placeholder.select(v-bind:to="{name: 'select-type',params: { type: 'dry'}}")
				img(src="/img/3@theme.png") 
	.weui-flex
		.weui-flex__item
			.placeholder.textcenter 最近新品
	box
					
	.weui-flex.display 
		
</template>
<script>
import { mapState } from 'vuex'
import box from '~/components/box.vue'
export default {
	data() {
		return {
			imgs: [
				{ img: 'banner-1a.png' },
				{ img: 'banner-2a.png' },
				{ img: 'banner-3a.png' },
				{ img: 'banner-4a.png' }
			],
			swiperOption: {
				slidesPerView: 'auto',
				centeredSlides: true,
				direction: 'horizontal',
				autoplayDisableOnInteraction: true,
				loop: true,
				pagination: {
					el: '.swiper-pagination',
					dynamicBullets: true,
					clickable: true
				}
			}
		}
	},
	components: {
		box
	},

	computed: {
		...mapState([
			//  'newProduct'
	])
	},
	mounted() {
		this.mySwiper.autoplay.start()
		console.log(this.mySwiper)
	},
	beforeCreate() {
		// 在组件创建之前，把数据获取到
		// this.$store.dispatch('getnewProduct')
	}
}
</script>
<style lang="sass" scoped>
.box-container
	// padding: 0 2%
	> ul
		width: 100%
		.href
			margin: 0% 0% 1.4% 2.6%
			width: 46%
			height: 180px
			display: inline
			background-color: #F5F6F5
			float: left
			color: #333
			border-radius: 6px
			text-align: center
			font-size: 13px
			img
				height: 65%
				width: 80%
			p
				font-weight: 520
			.price
				font-weight: 400

.display 
	width: 100%
	height: 60px
.container
	background-color: #FFFFFF
	padding-bottom: 53px
.swiper-slide
	img
		width: 100%
		height: 200px
.my-swiper 
	height: 300px
	width: 100%
	.swiper-slide 
		text-align: center
		font-size: 38px
		font-weight: 700
		background-color: #eee
		display: flex
		justify-content: center
		align-items: center

.swiper-pagination-bullet 
	background-color: red
		
.textcenter
	text-align: center
	height: 60px
	line-height: 50px
	color: #66502B
	font-size: 18px
	font-weight: 500
.select
	height: 200px
	width: 100%
.buttom
	margin-bottom: 4px
	.select
		img
			width: 100%
			height: 100%
.left
	margin-left: 4px
</style>







